<div id="column_gap_flexible" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px; row-gap: 20px;">
  <div style="flex: 1;"></div>
  <div style="flex: 1;"></div>
  <div style="flex: 1;"></div>
</div>

<div id="column_gap_inflexible" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px;">
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
</div>

<div id="column_gap_mixed_flexible" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px;">
  <div style="width: 20px;"></div>
  <div style="flex: 1;"></div>
  <div style="width: 20px;"></div>
</div>

<div id="column_gap_child_margins" style="flex-direction: row; width: 80px; height: 100px; column-gap: 10px;">
  <div style="flex: 1; margin-inline: 2px;"></div>
  <div style="flex: 1; margin-inline: 10px;"></div>
  <div style="flex: 1; margin-inline: 15px;"></div>
</div>

<div id="column_row_gap_wrapping" style="flex-direction: row; flex-wrap: wrap; width: 80px; column-gap: 10px; row-gap: 20px;">
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
</div>

<div id="column_gap_justify_flex_start" style="flex-direction: row; justify-content: flex-start; width: 100px; height: 100px; column-gap: 10px;">
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
</div>

<div id="column_gap_justify_center" style="flex-direction: row; justify-content: center; width: 100px; height: 100px; column-gap: 10px;">
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
</div>

<div id="column_gap_justify_flex_end" style="flex-direction: row; justify-content: flex-end; width: 100px; height: 100px; column-gap: 10px;">
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
</div>

<div id="column_gap_justify_space_between" style="flex-direction: row; justify-content: space-between; width: 100px; height: 100px; column-gap: 10px;">
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
</div>

<div id="column_gap_justify_space_around" style="flex-direction: row; justify-content: space-around; width: 100px; height: 100px; column-gap: 10px;">
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
</div>

<div id="column_gap_justify_space_evenly" style="flex-direction: row; justify-content: space-evenly; width: 100px; height: 100px; column-gap: 10px;">
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
</div>

<div id="column_gap_wrap_align_flex_start" style="flex-direction: row; flex-wrap: wrap; align-content: flex-start; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
</div>

<div id="column_gap_wrap_align_center" style="flex-direction: row; flex-wrap: wrap; align-content: center; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
</div>

<div id="column_gap_wrap_align_flex_end" style="flex-direction: row; flex-wrap: wrap; align-content: flex-end; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
</div>

<div id="column_gap_wrap_align_space_between" style="flex-direction: row; flex-wrap: wrap; align-content: space-between; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
</div>

<div id="column_gap_wrap_align_space_around" style="flex-direction: row; flex-wrap: wrap; align-content: space-around; width: 100px; height: 100px; column-gap: 10px; row-gap: 20px;">
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
  <div style="width: 20px; height: 20px"></div>
</div>

<div id="column_gap_wrap_align_stretch" style="flex-direction: row; flex-wrap: wrap; width: 300px; height: 300px; column-gap: 5px; align-content: stretch;">
  <div style="min-width: 60px; flex-grow: 1;"></div>
  <div style="min-width: 60px; flex-grow: 1;"></div>
  <div style="min-width: 60px; flex-grow: 1;"></div>
  <div style="min-width: 60px; flex-grow: 1;"></div>
  <div style="min-width: 60px; flex-grow: 1;"></div>
</div>

<div id="column_gap_determines_parent_width" style="flex-direction: row; height: 100px; align-items: 'stretch'; column-gap: 10px;">
  <div style="width: 10px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 30px;"></div>
</div>

<div id="row_gap_align_items_stretch" style="flex-direction: row; flex-wrap: wrap; width: 100px; height: 200px; column-gap: 10px; row-gap: 20px; align-items:stretch; align-content: stretch">
  <div style="width: 20px; "></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
</div>

<div id="row_gap_align_items_end" style="flex-direction: row; flex-wrap: wrap; width: 100px; height: 200px; column-gap: 10px; row-gap: 20px; align-items:flex-end;">
  <div style="width: 20px; "></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
  <div style="width: 20px;"></div>
</div>

<div id="row_gap_column_child_margins" style="flex-direction: column; width: 100px; height: 200px; row-gap: 10px;">
  <div style="flex: 1; margin-block: 2px;"></div>
  <div style="flex: 1; margin-block: 10px;"></div>
  <div style="flex: 1; margin-block: 15px;"></div>
</div>

<div id="row_gap_row_wrap_child_margins" style="flex-direction: row; flex-wrap: wrap; width: 100px; height: 200px; row-gap: 10px;">
  <div style="width: 60px; margin-block: 2px;"></div>
  <div style="width: 60px; margin-block: 10px;"></div>
  <div style="width: 60px; margin-block: 15px;"></div>
</div>

<div id="row_gap_determines_parent_height" style="flex-direction: column; width: 100px; align-items: 'stretch'; row-gap: 10px;">
  <div style="height: 10px;"></div>
  <div style="height: 20px"></div>
  <div style="height: 30px"></div>
</div>
